<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="bottom">
    <ul>
      <li role="" @click="onchangeRouterTabber1">
        <img :src="CampusOverviewImgsrc1" alt="">
        <p>智能检测</p>
      </li>
      <li role="" @click="onchangeRouterTabber3">
        <img :src="CampusOverviewImgsrc3" alt="">
        <p>安防管理</p>
      </li>
      <li role="" @click="onchangeRouterTabber2">
        <img :src="CampusOverviewImgsrc2" alt="">
        <p>就业态势</p>
      </li>

      <li role="" @click="onchangeRouterTabber4">
        <img :src="CampusOverviewImgsrc4" alt="">
        <p>设备运维</p>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'




const CampusOverviewImgsrc1 = ref('../../../img/icon/智能检测 Normal.png')
const CampusOverviewImgsrc2 = ref('../../../img/icon/安防管理 Normal.png')
const CampusOverviewImgsrc3 = ref('../../../img/icon/就业态势 Normal.png')
const CampusOverviewImgsrc4 = ref('../../../img/icon/设备运维 Normal.png')
// import type{Router} from 'vue-router'
// ../../../img/icon/智能检测 Normal.png
onMounted(()=>{
  let routers = useRoute()
  let name = routers.name
  console.log(name);
  
  if (name == 'CampusOverview') {
  CampusOverviewImgsrc1.value = '../../../img/icon/智能检测.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}else if (name == 'SecurityManagement') {
    CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}else if (name == 'EmploymentDynamics') {
   CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}else if (name == 'DeviceO&M') {
   CampusOverviewImgsrc4.value = '../../../img/icon/设备运维.png'
  CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
}

})
const onchangeRouterTabber1 = () => {
  router.push('/CampusOverview')
 CampusOverviewImgsrc1.value = '../../../img/icon/智能检测.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}

const onchangeRouterTabber2 = () => {
  router.push('/SecurityManagement')
  CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}

const onchangeRouterTabber3 = () => {
  router.push('/EmploymentDynamics')
   CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势.png'
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维 Normal.png'
}

const onchangeRouterTabber4 = () => {
  router.push('/DeviceO&M')
  CampusOverviewImgsrc4.value = '../../../img/icon/设备运维.png'
  CampusOverviewImgsrc1.value = '../../../img/icon/智能检测 Normal.png'
  CampusOverviewImgsrc2.value = '../../../img/icon/安防管理 Normal.png'
  CampusOverviewImgsrc3.value = '../../../img/icon/就业态势 Normal.png'
}

</script>

<style scoped>
#bottom ul {
  display: flex;
  justify-content: center;
}

#bottom ul li img {
  width: 1.2rem;
  height: 1.2rem;

}

#bottom {
  background-image: url(../../../img/菜单栏.png);
  background-repeat: no-repeat;
  /* 防止图像重复 */
  background-size: 100% 100%;
  width: 50vw;
  height: 10vh;
  text-align: center;
  position: fixed;
  left: 25%;
  bottom: 0;
  text-align: center;
  z-index: 99999999999;
}
</style>